<template>
    <div class="x3">
        <el-container style="height: 100%; margin: 0;padding: 0;">
            <el-header class="tou1">
                <div style="display: flex;">
                    <i :class="this.$router.options.routes[3].children[8].meta.icon" style="align-self: center;"></i>
                    <p>{{ this.$router.options.routes[3].children[8].meta.name }}</p>
                </div>
            </el-header>
            <el-main class="shen1">
                <div style="display: flex;">
                    <div>
                        <template>
                            <el-button type="button" style="width: 100px ;height: 35px;" @click='add'>点击打开 </el-button>
                        </template>
                    </div>
                    <div style="display: flex; justify-content: flex-end;margin-left:20px">
                        <el-input v-model="params.name" placeholder="请输入内容"></el-input>
                        <el-button type="primary" icon="el-icon-search" @click="sous">搜索</el-button>
                    </div>
                </div>
                <div>
                    <template>
                        <el-table :data="zhuanye" style="width: 100% ,">
                            <el-table-column prop="id" label="ID" width="180">
                            </el-table-column>
                            <el-table-column prop="username" label="姓名" width="180">
                            </el-table-column>
                            <el-table-column prop="privilege" label="权限">
                            </el-table-column>


                            <el-table-column prop="" label="操作">
                                <template slot-scope="scope">
                                    <el-button  type="danger"size="small"@click='shan(scope.row.id)'>删除</el-button>
                                    <el-button type="success"size="small" @click="edit(scope.row.id)">编辑</el-button>
                                </template>
                            </el-table-column>

                        </el-table>
                    </template>
                </div>
            </el-main>
            <el-footer class="jiao1">
                <div class="block">
                    <span class="demonstration"></span>
                    <el-pagination :current-page.sync="page" layout="prev, pager, next" :total="yeshu">
                    </el-pagination>
                </div>
            </el-footer>
        </el-container>

        <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
            <el-form :model="form" ref="form">
                <el-form-item prop="username" label="用户名">
                    <el-input v-model="form.username" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="权限">
                    <el-checkbox-group v-model="form.privileges">
                        <el-checkbox :label="1">系管理</el-checkbox>
                        <el-checkbox :label="2">专业管理</el-checkbox>
                        <el-checkbox :label="4">班级管理</el-checkbox>
                        <el-checkbox :label="8">学生管理</el-checkbox>
                        <el-checkbox :label="16">教师管理</el-checkbox>
                        <el-checkbox :label="32">课程管理</el-checkbox>
                        <el-checkbox :label="64">选课管理</el-checkbox>
                        <el-checkbox :label="128">管理员管理</el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item prop="password" label="密码">
                    <el-input v-model="form.password" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="glytj01">确 定</el-button>
            </div>
        </el-dialog>

    </div>

</template>
<script>
import { glygl, glytianjia, glyglxg, glyglxq ,shan9} from '@/api/index'
export default {
    data() {
        return {
            input: '',
            zhuanye: [

            ],
            params: {
                name: "",

                departmentName: ''
            },
            page: 1,
            yeshu: 1,
            form: {
                privileges: [],
                password: '',
                id: -1,
                username: '',

            },
            dialogFormVisible: false,
        }
    },

    methods: {
        add() {

            this.dialogFormVisible = true
        },
        glytj01() {
            this.form["privilege"] = this.form.privileges.reduce((current, next) => current + next)
            console.log(this.form);
            this.$refs['form'].validate(f => {


                // 确保验证通过
                if (this.form.id === -1) {
                    console.log(1);

                    glytianjia(this.form).then(res => {

                        console.log(res);

                        if (res.code === 0) {

                            this.$message({

                                message: "添加成功",

                                type: "success"

                            });

                            this.glygl1();

                            this.dialogFormVisible = false;

                        }

                    })
                } else {
                    glyglxg(this.form).then(res => {
                    if (res.code === 0) {
                        this.$message({ message: "修改成功", type: "success" });
                        this.glygl1();
                        this.dialogFormVisible = false;
                    }
                })
                }


            });

        },
        edit(id) {
            console.log(id);
            glyglxq(id).then(res => {
                console.log(res);
            
                   
                    let privileges = [];
                    for (let bit = 0; bit < 8; bit++) {
                        // 0100 0000
                        // 0010 0000
                        if (((1 << bit) & res.data.privilege) === 1 << bit) {
                            privileges.push((1 << bit));
                        }
                    }
                    console.log(privileges);
                 this.form = res.data;
                 this.$set(this.form, "privileges", privileges)
                    this.dialogFormVisible = true;

            })
        },
        
        
        glygl1() {
            glygl(this.params, 1).then(res => {
                console.log(res.data);
                if (res.code === 0) {



                    this.zhuanye = res.data
                }
            })
        },


        sous() {


            this.glygl1()
        },
        shan(id) {

shan9(id).then(res => {

    if (res.code === 0) {

        // 假设返回 code 为 0 表示删除成功

        this.$message({

            message: "删除成功",

            type: "success"

        });

        // 刷新数据列表

        this.glygl1();

    } else {

        // 处理删除失败的情况

        console.error("删除失败", res);

    }

}).catch(error => {

    console.error("请求失败", error);

});

},

    },
    mounted() {
        this.glygl1(), this.glygl1()
    }
}
</script>
<style lang="scss">
html,
body,
.x3 {

    height: 100%;

    margin: 0;

    padding: 0;

}

.el-header,
.el-main,
.el-footer {
    width: 100%;
    margin: 0;

    padding: 0; // 如果你想完全移除内边距，可以这样设置

    // 如果只是想要调整内边距，可以指定具体的值，例如：

    // padding: 10px;

}

.block {
    justify-items: center;
}
</style>